<template>
  <div class="keyboard-number-2" :data-sysInfo="getOperatingSystem">
    <div class="keyboard-number-inside">
      <div class="flex-box-left">
        <div class="first"><ScrollX :speed="30">{{optionsInfo.reportTips}}</ScrollX></div>
        <div class="second"
             ref="wrap"
             :data-info="getElements">
          <el-input
              ref="inputField"
              v-model="value"
              :autofocus="true"
              :placeholder="optionsInfo.placeholder"
              @blur="handleFocusInput"
              @change="handleInput('enter')"/>
        </div>
        <div class="last">
          <el-button class="reset btn" @click.stop.prevent="handleInput('reset')" :disabled="!value">重置</el-button>
          <el-button type="primary" class="sure btn" @click.stop.prevent="handleInput('enter')" :disabled="!value">
            确认
          </el-button>
        </div>
      </div>
      <div class="flex-box-right">
        <div class="keyboard-body" v-if="true">
          <div class="key-left">
            <div v-for="(item) in keyboardOptions" :key="item.key" :class="[item.className]">
              <template v-if="(item.key) ==='enter'">
                <el-button
                  class="van-keys"
                  :class="{'disable-button': !value}"
                  :disabled="!value"
                  @click="handleInput(item.key)"
                >
                  {{ item.title }}
                </el-button>
              </template>
              <template v-else>
                <!--判断是否是触控-->
                <template v-if="isTouchDevice">
                  <template v-if="platformFn">
                    <div class="van-keys" @click.stop.prevent="handleInput(item.key)">
                      {{ item.title }}
                    </div>
                  </template>
                  <template v-else>
                    <div class="van-keys" @touchstart.stop.prevent="handleInput(item.key)">
                      {{ item.title }}
                    </div>
                  </template>
                </template>
                <template v-else>
                  <div class="van-keys" @click.stop.prevent="handleInput(item.key)">
                    {{ item.title }}
                  </div>
                </template>
              </template>
            </div>
          </div>
          <div class="key-right">
            <div class="van-keys van-key-del" @click.stop.prevent="handleInput('del')">删除</div>
          </div>
        </div>

      </div>
    </div>
    <div class="card-wrapper">
      <div class="card-content">
        <div class="card-container">
          <div class="card-body card-jzm"></div>
          <div class="card-footer">院内就诊码</div>
        </div>
      </div>
      <div class="card-content">
        <div class="card-container">
          <div class="card-body card-sfz"></div>
          <div class="card-footer">身份证登录</div>
        </div>
      </div>
      <div class="card-content">
        <div class="card-container">
          <div class="card-body card-dzyb"></div>
          <div class="card-footer">电子医保凭证</div>
        </div>
      </div>
      <div class="card-content">
        <div class="card-container">
          <div class="card-body card-yjz"></div>
          <div class="card-footer">永居证登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {v4 as uuid} from "uuid";
import ScrollX from "@c/public/scroll/scrollX";
export default {
  name: 'reportKeyboard2',

  components: {
    ScrollX
  },

  props: {
    options: {
      type: Array
    },
    field: {
      type: Object
    },
    devType: {
      type: Boolean,
      default: false,
    },
    // 键盘类型 1:身份证 2:非身份证
    keyboardType:{
      type: Number,
      default: ()=>{
        return 1
      }
    }
  },

  data() {
    return {
      timeout: null,
      // 自动清空的等待时间
      timeoutDuration: 15 * 1000,  //10min
      // 输入的参数
      value: '',
      // 是否展示输入框
      showInput: true,
      //键盘的参数
      keyboardOptions: [
        {key: '1', title: '1'},
        {key: '2', title: '2'},
        {key: '3', title: '3'},
        {key: '4', title: '4'},
        {key: '5', title: '5'},
        {key: '6', title: '6'},
        {key: '7', title: '7'},
        {key: '8', title: '8'},
        {key: '9', title: '9'},
        {key: 'X', title: 'X'},
        {key: '0', title: '0'},
        {key: 'S', title: 'S'},
      ],
      number: 0,
      widgetKey: uuid(),
      optionsInfo: Object(),
    }
  },

  computed: {
    // 判断设备是否是触控
    isTouchDevice() {
      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
    },

    platformFn() {
      let platformInfo = this.getOperatingSystem;
      let platformArr = ['Windows Vista', 'Windows XP', 'Windows 7', 'Windows 8.1', 'Windows 8.1'];
      return platformArr.includes(platformInfo);
    },

    getOperatingSystem() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      let winInfo = userAgent.match(/win/i) && !userAgent.match(/mobile/i);
      if (userAgent.match(/android/i)) {
        return 'Android';
      }
      if (winInfo) {
        if (/Windows NT 10.0/.test(userAgent)) {
          return "Windows 10";
        } else if (/Windows NT 6.3/.test(userAgent)) {
          return "Windows 8.1";
        } else if (/Windows NT 6.2/.test(userAgent)) {
          return "Windows 8";
        } else if (/Windows NT 6.1/.test(userAgent)) {
          return "Windows 7";
        } else if (/Windows NT 6.0/.test(userAgent)) {
          return "Windows Vista";
        } else if (/Windows NT 5.1|Windows XP/.test(userAgent)) {
          return "Windows XP";
        } else {
          return "Unknown Windows version";
        }
      }
      if (userAgent.match(/mac/i)) {
        return 'macOS';
      }
      if (userAgent.match(/linux/i)) {
        return 'Linux';
      }
      if (userAgent.match(/iphone/i)) {
        return 'iPhone';
      }
      if (userAgent.match(/ipad/i)) {
        return 'iPad';
      }
      if (userAgent.match(/ipod/i)) {
        return 'iPod';
      }
      return 'unknown';
    },

    getElements() {
      this.$nextTick(() => {
        if (!this.$lodash.isEmpty(this.$refs)) {
          console.log(this.$refs)
          this.$refs.inputField.focus();
          return this.$refs?.inputField
        } else {
          return null
        }
      })

    }
  },

  mounted() {
    const self = this;
    //step5 监听页面操作，触发重置超时函数
    window.addEventListener("mousemove", self.resetTimeout);
    window.addEventListener("keydown", self.resetTimeout);
    window.addEventListener("click", self.resetTimeout);
    self.resetTimeout();
  },

  methods: {
    handleFocusInput() {
      console.log('失焦')
      const self = this;
      if (self.devType) {
        setTimeout(() => {
          self.$refs.inputField?.focus()
        }, 100)
      }
    },

    // 输入新的数组
    onKeyPress() {
      this.number = ++(this.number)
    },

    handleInput(key) {
      const self = this;
      switch (key) {
        case 'del':
          this.value = self.value.slice(0, -1);
          break;
        case 'reset':
          this.value = '';
          break;
          // 提交按钮
        case 'enter':
          if (self.value.trim().length > 0) {
            let params = Object();
            Reflect.set(params, 'number', (self.value));
            self.$emit('handleSubmit', params);
            self.value = '';
          }
          break;
        default:
          if (self.value.trim().length < 18) {
            this.value += key
          }
      }
    },

    // 重置定时器时间
    resetTimeout() {
      const self = this;
      // console.log('wrap-执行-重置定时器时间');
      if (!!(self.timeout)) {
        clearTimeout(self.timeout);
      }
      // 特定时间不做操作关闭抽屉-清空数据
      self.timeout = setTimeout(() => {
        self.value = '';
      }, self.timeoutDuration);
    },
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = (val.options.config);
        this.optionsInfo = val.options[key];
        let {step = 0} = this.optionsInfo
        if (parseInt(step) === 0) {
          this.handleFocusInput()
        }
      },
      deep: true,
      immediate: true
    },

    // getElements: {
    //   handler(val, pre) {
    //     // 当元素变化时，这里会被调用
    //     console.log('-----')
    //   },
    //   immediate: true, // 初始化时立即触发
    //   deep: true,
    // }
  },

  destroyed() {
    window.removeEventListener("mousemove", this.resetTimeout);
    window.removeEventListener("keydown", this.resetTimeout);
    window.removeEventListener("click", this.resetTimeout);
  }

};
</script>

<style lang="scss" scoped>
.keyboard-number-2 {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 25px 26px 20px;

  .keyboard-number-inside {
    width: calc(100%);
    min-width: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    height: 360px;
    display: flex;
    .flex-box-left {
      width: 565px;
      border: none;
      padding: 20px 0;
      box-sizing: border-box;
      background: transparent;
      display: block;
      .first {
        width: 100%;
        font-weight: 500;
        color: #333;
        box-sizing: border-box;
        height: 92px;
        font-size: 66px;
        text-align: center;
      }

      .second {
        height: 108px;
        text-align: center;
        .el-input {
          height: 100%;
        }

        :deep(.el-input__inner) {
          height: 100%;
          font-weight: 500;
          font-size: 44px;
          color: #99A1B3;
          overflow: hidden;
          border-radius: 12px;
          border: 3px solid #CDD2DC;
          text-align: center;
        }
      }

      .last {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
        box-sizing: border-box;
        .btn {
          font-size: 44px;
          flex-shrink: 0;
          background-color: rgba(232, 234, 236, 0.5);
          height: 90px;
          box-sizing: border-box;
          border-radius: 18px;
          font-weight: 400;
          padding: 0;
          line-height: 90px;
          text-align: center;
          border: none;
          outline: none;
        }

        .reset {
          margin-left: 2px;
          width: 180px;
          color: #232324;
          box-shadow: 0 5px 0 0 rgba(0,0,0,0.2);
        }

        .sure {
          width: calc(100% - 180px - 36px);
          color: #E8E8E8;
          background: #0059B3;
          box-shadow: 0 5px 0 0 #003F7E;
        }
      }
    }

    .flex-box-right {
      border: none;
      background: transparent;
      flex: 1;
      overflow: hidden;
      padding-left: 98px;
      padding-right: 82px;
      box-sizing: border-box;
    }
  }
  .card-wrapper{
    display: flex;
    .card-content{
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;
      padding: 0 8px;
      .card-container{
        border-radius: 20px;
        overflow: hidden;
        border: 2px solid #CDD2DC;
        .card-body{
          height: 195px;
          background: #fff url("~@/components/assets/images/design/card-1.png") no-repeat center;
          background-size: 184px;
          &.card-sfz{
            background: #fff url("~@/components/assets/images/design/card-2.png") no-repeat center;
            background-size: 200px;
          }
          &.card-dzyb{
            background: #fff url("~@/components/assets/images/design/card-3.png") no-repeat center;
            background-size: 195px;
          }
          &.card-yjz{
            background: #fff url("~@/components/assets/images/design/card-4.png") no-repeat center;
            background-size: 190px;
          }
        }
        .card-footer{
          height: 65px;
          line-height: 65px;
          background: #0059B3;
          font-size: 30px;
          text-align: center;
          color: #fff;
        }
      }

    }
  }
  //键盘
  .keyboard-body {
    display: flex;
    justify-content: space-between;
    flex: 3;
    flex-wrap: wrap;
    .van-keys {
      height: 100%;
      flex-shrink: 0;
      background-color: rgba(232, 234, 236, 0.5);
      cursor: pointer;
      flex-grow: 1;
      display: flex;
      align-self: center;
      align-items: center;
      align-content: center;
      justify-content: center;
      width: 100%;
      border-radius: 18px;
      font-weight: 400;
      color: #232324;
      box-shadow: 0 5px 0 0 rgba(0,0,0,0.2);
      text-align: center;
    }
    .key-left{
      flex: 1;
      overflow: hidden;
      &>div{
        padding: 6px 12px;
        cursor: pointer;
        float: left;
        width: calc(100% / 3);
        font-size: 62px;
        height: 82px;
        text-align: center;
        line-height: 82px;
        box-sizing: border-box;
        .el-button {
          font-size: 52px;
        }
      }
    }
    .key-right{
      width: 98px;
      padding: 6px 0 6px 12px;
      height: 328px;
      box-sizing: border-box;
      div{
        font-size: 52px;
      }
    }

  }
}
</style>
